<!-- 顶部菜单 -->
@props(['modules' => [], 'activeModule' => ''])

<header class="h-16 bg-white dark:bg-gray-800 shadow-md flex items-center justify-between px-6">
    <!-- 左侧：模块导航 和 侧边栏切换按钮 -->
    <div class="flex items-center">
        <!-- 侧边栏控制按钮 -->
        <button @click="toggleSidebar" class="text-gray-500 dark:text-gray-400 focus:outline-none mr-4">
            <!-- 大屏幕：展开/收窄图标 -->
            <svg x-show="isLargeScreen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path x-show="sidebarExpanded" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                <path x-show="!sidebarExpanded" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
            </svg>

            <!-- 中等屏幕：展开/收窄图标 -->
            <svg x-show="isMediumScreen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path x-show="!sidebarCollapsed" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
                <path x-show="sidebarCollapsed" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
            </svg>

            <!-- 小屏幕：显示/隐藏图标 -->
            <svg x-show="isSmallScreen" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
            </svg>
        </button>

        <nav class="hidden md:flex space-x-4">
            @foreach($modules as $moduleName => $module)
            <a href="{{$module['url']}}"
               class="{{$activeModule === $moduleName ? 'text-indigo-600 dark:text-indigo-400 border-b-2 border-indigo-500' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-700 border-b-2 border-transparent'}} px-1 py-2 text-sm font-medium"
               >{{$module['title']}}</a>
            @endforeach
        </nav>
    </div>

    <!-- 右侧：用户菜单 -->
    <div class="relative">
        <button @click="userDropdownOpen = !userDropdownOpen" class="flex items-center space-x-2 text-gray-700 dark:text-gray-200 focus:outline-none">
{{--            <img class="h-8 w-8 rounded-full object-cover" src="https://via.placeholder.com/150" alt="User avatar">--}}
            <span class="hidden sm:inline">{{ Auth::user()->name ?? '用户名' }}</span>
            <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
            </svg>
        </button>
        <div x-show="userDropdownOpen" @click.away="userDropdownOpen = false" class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg py-1 z-50"
             x-transition:enter="transition ease-out duration-100 transform"
             x-transition:enter-start="opacity-0 scale-95"
             x-transition:enter-end="opacity-100 scale-100"
             x-transition:leave="transition ease-in duration-75 transform"
             x-transition:leave-start="opacity-100 scale-100"
             x-transition:leave-end="opacity-0 scale-95">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">个人资料</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">设置</a>
            <form method="POST" action="{{ route('admin.logout') }}">
                @csrf
                <a href="{{ route('admin.logout') }}"
                   onclick="event.preventDefault(); this.closest('form').submit();"
                   class="block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">
                    退出登录
                </a>
            </form>
        </div>
    </div>
</header>
